<template>
    <section class="special">
    <Header style="z-index:1025">
        <header-menu :index="'4-1'"></header-menu>
    </Header>
        <top-search :navlist="NavTitle"></top-search>
        <user-nav :list="listTitle"></user-nav>
        <cricle-top style="margin-bottom:1px" :toplist="toplist"></cricle-top>
        <div class="swiper">
            <Carousel autoplay loop>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
            </Carousel>
        </div>

        <div class="container clearfix">
           <h1>精彩专题</h1>
         <ul>
             <li v-for="i in list" @click="fun(i.id,i.mode,i.url)"><img :src="$Url+i.image" alt=""></li>

         </ul>
            <div style="clear: both"></div>
            <div style="text-align: center;margin-top: 40px">  <Page :total="100" />  </div>
        </div>

    <bottom-icon></bottom-icon>
    <Footer>
        <page-footer></page-footer>
    </Footer>
        </section>
</template>

<script>
    import HeaderMenu from '@/components/Header/'
    import PageFooter from '../../components/Footer/'
    import BottomIcon from '../../components/BottomIcon/'
    import CricleTop from '../../components/Circle/Cricle-top'
    import userNav from '../../components/Usertop/userNav'
    import TopSearch from '../../components/TopSearch/'
    export default {
        name: "special",
        components: {
            PageFooter,
            BottomIcon,
            HeaderMenu,
            CricleTop,
            userNav,
            TopSearch
        },
        data () {
            return {
                NavTitle:{
                    id:1,
                    name:'圈子',
                    title:'越泡越美  越美越泡',
                    text:'写帖子',
                    mytext:'我的帖子'
                },
                listTitle: [
                    {id:1,name:"广场",show:false,path:'/circle',
                        child: {id:4,name:"帖子详情",show:false,path:'/circledelist',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {id:2,name:"活动",show:true,path:'/activity',
                        child: {id:4,name:"活动详情",show:false,path:'/activitydelists',
                            child: {id:4,name:"报名人数",show:false,path:'/activityregistration'},
                        },
                    },
                    {id:3,name:"专题",show:false,path:'/special',
                        child: {id:4,name:"专题详情",show:false,path:'/specialdelist',
                            child: {id:4,name:"报名人数",show:false,path:'/'},
                        },
                    },
                    {
                        id: 4, name: "达人", show: false, path: '/aman',
                        child: {id: 4, name: "达人详情", show: false, path: '/amandelists',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        }
                    }
                ],
                toplist: [
                    {id:1,num:12345,altogether:123456,type:1},
                ],
                list:[]


            }
        },
        created () {
          this.getinfo()
        },
        methods :{
            getinfo () {
                let _this =this
                _this.$post('/api/activity/ThemeList',
                    {

                    }, function (res) {
                        console.log(res)
                        _this.list = res.data
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            fun (id,mode,url) {
                if(mode == 1){
                    window.location.href = 'https://'+url
                }else {
                    this.$router.push({path:'/specialdelist',query:{id:id}})
                }

            }
        }
    }
</script>

<style scoped lang="less">
   .swiper{
       height: 375px;
       img{
           width: 1917px;
           height: 375px;
       }
   }
   .container{
       margin-bottom: 60px;
       h1{
           width: 80px;
           font-size: 20px;
           font-weight: normal;
           font-stretch: normal;
           color: #333333;
           padding-top: 30px;
           padding-bottom: 20px;
       }
       ul{
           >:nth-child(2n+2){
               margin-right: 0;
           }
       }
       li{
           width: 580px;
           height: 220px;
           border: solid 1px #dcdcdc;
           padding: 10px;
           float: left;
           margin-right: 10px;
           margin-bottom: 10px;
           img{
               width: 100%;
               height: 100%;
               border-radius: 5px;
           }
       }
   }
</style>